<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <title>角色信息</title>
    <link rel="stylesheet" href="/static/lib/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/static/css/public.css" media="all">
    <style>
        body {
            background-color: #ffffff;
        }

        .layui-input-block {
            margin-left: 65px;
        }

        .layui-form-label {
            width: 60px;
            padding: 9px 0px;
        }
    </style>
</head>
<body>
<div class="layui-container">
    <form method="post" class="layui-form" onsubmit="return false">
        <div class="layui-form-item">
            <label class="layui-form-label">角色名</label>
            <div class="layui-input-block">
                <input type="text" name="name" lay-verify="required|username" th:value="${role?.name}"
                       lay-reqtext="角色名称不能为空" placeholder="请输入角色名称" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">管理部门</label>
            <div class="layui-input-block">
                <input id="deptName" type="text" name="deptName" readonly th:value="${role?.deptName}"
                       placeholder="请选择部门" class="layui-input" style="width:80%;float:left;">
                <button class="layui-btn layui-bg-gray" type="button" id="dept-clear" style="width:18%;float:right;">清空</button>
            </div>
            <div class="layui-hide">
                <input id="deptId" placeholder="隐藏的部门id" value="0" name="deptId" th:value="${role?.deptId}">
            </div>
        </div>
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">角色描述</label>
            <div class="layui-input-block">
                <textarea name="description" class="layui-textarea" th:utext="${role?.description}"
                          placeholder="请输入角色描述"></textarea>
            </div>
        </div>
        <div class="layui-hide">
            <button  lay-submit id="save" lay-filter="save">确认</button>
        </div>
    </form>
</div>
<script src="/static/lib/layui/layui.js" charset="utf-8"></script>
<script>
    layui.use(['form'], function () {
        var $ = layui.jquery;
        var form = layui.form;

        form.verify({
            username: function (value, item) { //value：表单的值、item：表单的DOM对象
                if (!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(value)) {
                    return '角色名称不能有特殊字符';
                }

                if (/(^\_)|(\__)|(\_+$)/.test(value)) {
                    return '角色名称首尾不能出现下划线\'_\'';
                }

                if (/^\d+\d+\d$/.test(value)) {
                    return '角色名称不能全为数字';
                }
            }
        });

        //选择部门
        var deptName = $("#deptName");
        var deptId = $("#deptId");
        deptName.click(function () {
            var open = layer.open({
                title: '选择部门',
                type: 2,
                shadeClose: true,
                scrollbar: false,
                area: ['90%', '90%'],
                btn: ['确定', '取消'],
                btnAlign: 'c',
                content: '/sys/dept/select',
                yes: function (index, layero) {
                    var body = layer.getChildFrame('body', index);
                    //得到iframe页的窗口对象，执行iframe页的方法：iframeWin.method();
                    var iframeWin = window[layero.find('iframe')[0]['name']];
                    var dept = iframeWin.checkedbox;
                    deptName.val(dept['name']);
                    deptId.val(dept['id']);
                    layer.close(index);
                }
            });
        });
        $("#dept-clear").click(function () {
            deptId.val('0');
            deptName.val('');
        });

    });

</script>
</body>
</html>